<template>
  <div class>
    <sign-model :selectDate="dateToday" @selected-user="selectedUser" title="签到轨迹">
      <el-header class="text-right p-0" style="height: 40px;">
        <div>
          <el-select v-model="selectType" @change="typeChange" placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker ref="test" value-format="yyyy-MM-dd" v-model="dateToday" type="date"
            placeholder="选择日期" size="small"></el-date-picker>
          <!-- <el-button type="primary" icon="el-icon-search" @click="searchData()" size="small">查询</el-button>-->
        </div>
      </el-header>
      <el-main class="p-0">
        <InitMap ref="map" :height="bodyHeight+'px'" backgroundColor="white" />
      </el-main>
    </sign-model>
  </div>
</template>
<script>
import SignModel from "./SignModel";
import InitMap from "../map/InitMap";
import axios from "axios";

export default {
  name: "signtrajetory",
  title: "签到轨迹",
  components: { SignModel, InitMap },
  data() {
    return {
      dateToday: "",
      currentUser: null,
      isLoadComplate: false,
      options: [{
        value: 'CCJZ',
        label: '初次举证'
      }, {
        value: 'BCJZ',
        label: '补充举证'
      }, {
        value: 'ZXJZ',
        label: '在线举证'
      }, {
        value: 'JCTB',
        label: '监测图斑'
      }, {
        value: 'DLYB',
        label: '地类样本'
      }, {
        value: 'ZZBG',
        label: '重点地类图斑'
      }],
      selectType: "CCJZ"
    };
  },
  methods: {
    test() {
      console.log("11", this.$refs.test);
    },
    selectedUser(user) {
      this.currentUser = user;
      this.searchData();
    },
    searchData() {
      if (!this.isLoadComplate) {
        this.$message({
          message: "地图初始化未完成，请稍后再查询",
          type: "warning"
        });
        return;
      }
      if (this.currentUser == null) {
        this.$message({
          message: "请选择一个用户再查询",
          type: "warning"
        });
        return;
      }
      if (this.dateToday == "") {
        this.$message({
          message: "请选择日期再查询",
          type: "warning"
        });
        return;
      }
      axios
        .get(
          this.$paramsConnect(this.$api.getSomeDayGPSByAccount, {
            account: this.currentUser.account,
            currentTime: this.dateToday,
            areaId: this.currentUser.areaId
          })
        )
        .then(res => {
          this.$refs.map.removeGraphics();
          if (res.data.code === "200") {
            let paths = [];
            res.data.data.forEach(element => {
              paths.push([element.x, element.y]);
            });
            this.$refs.map.addPolyline(paths, "#00FFFF", 2).then(status2 => {
              if (status2) {
                let point = paths[0];
                this.$refs.map.mapCenterAt(point, 13, 50000);
                this.$refs.map
                  .addImageLableToMap(
                    res.data.data[0].x,
                    res.data.data[0].y,
                    "static/start.png",
                    {
                      width: "30px",
                      height: "30px"
                    }
                  )
                  .then(status3 => { });
                let length = res.data.data.length - 1;
                this.$refs.map.addImageLableToMap(
                  res.data.data[length].x,
                  res.data.data[length].y,
                  "static/end.png",
                  {
                    width: "30px",
                    height: "30px"
                  }
                );
              }
            });
          } else {
            this.$codeError(res);
          }
          this.creatSpotMarkers();
        })
        .catch(error => {
          this.$catchError(error);
        });
    },
    creatSpotMarkers() {
      var url =
        "/survey/inspect/getAssignSpot/" +
        this.currentUser.account +
        "/" +
        this.selectType +
        "/" +
        this.currentUser.areaId;
      axios
        .get(url)
        .then(res => {
          if (res.data.code === "200") {
            res.data.data.forEach(item => {
              this.$refs.map
                .addMarkerToMap(
                  item.gpsX,
                  item.gpsY,
                  "static/import_person.png",
                  0,
                  {
                    width: '39px',
                    height: '25px'
                  }
                );
              this.$refs.map
                .addTextLableToMap(
                  item.gpsX,
                  item.gpsY,
                  item.spotId,
                  "12px",
                  "white"
                )
            });
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    },
    typeChange() {
      this.searchData();
    }
  },
  computed: {
    bodyHeight() {
      return document.body.clientHeight - 80 - 60 - 100;
    }
  },
  mounted() {
    this.$refs.map.loadWebTileMap().then(status => {
      if (status) {
        let _this = this;
        this.$refs.map.creatGraphicsLayer().then(status1 => {
          _this.isLoadComplate = true;
          _this.$refs.map.mapCenterAt([108.9, 34.27], 10, 5000000);
        });
      }
    });

    this.dateToday = this.$formatYMD(
      new Date(new Date() - 24 * 60 * 60 * 1000)
    );
  }
};
</script>